<template>
	<view class="recharge-container">
		<!-- 充值金额标题 -->
		<view class="recharge-header">
			<text class="header-title">充值金额</text>
		</view>

		<!-- 金额显示 -->
		<view class="amount-section">
			<view class="amount-display">
				<text class="currency-symbol">¥</text>
				<input class="amount-input" type="number" v-model="rechargeAmount" placeholder="0"
					@input="onAmountInput" />
			</view>
		</view>

		<!-- 充值按钮 -->
		<view class="recharge-button-section">
			<u-button @click="submitRecharge" text="充值" shape="circle" color="#FF6B35"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			rechargeAmount: '',
			canRecharge: false
		}
	},
	computed: {
		buttonStyle() {
			return {
				backgroundColor: this.canRecharge ? '#FF6B35' : '#CCCCCC',
				color: '#FFFFFF'
			}
		}
	},
	methods: {
		// 金额输入处理
		onAmountInput(e) {
			const amount = parseFloat(e.detail.value);
			this.canRecharge = amount > 0;
		},

		// 提交充值
		submitRecharge() {
			if (!this.canRecharge) {
				uni.showToast({
					title: '请输入充值金额',
					icon: 'none'
				});
				return;
			}

			const amount = encodeURIComponent(this.rechargeAmount);
			// 跳转到支付订单页面
			uni.navigateTo({
				url: `/pages/zhifudingdan/zhifudingdan?amount=${amount}`
			});
		},


	}
}
</script>

<style scoped>
.recharge-container {
	background-color: #ffffff;
	min-height: 100vh;
	padding: 40rpx;
}

.recharge-header {
	margin-bottom: 60rpx;
}

.header-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333333;
}

.amount-section {
	margin-bottom: 80rpx;
}

.amount-display {
	display: flex;
	align-items: center;
	justify-content: center;
}

.currency-symbol {
	font-size: 48rpx;
	font-weight: bold;
	color: #333333;
	margin-right: 10rpx;
}

.amount-input {
	font-size: 48rpx;
	font-weight: bold;
	color: #333333;
	text-align: center;
	min-width: 200rpx;
}

.recharge-button-section {
	margin-top: 60rpx;
}

/* 按钮样式 */
:deep(.u-button) {
	width: 100%;
	height: 88rpx;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: bold;
}
</style>